<template>
  <div style="display: flex;flex-direction: column;align-items: center;padding: 20px 30px;">
    <div style="width: 100%;">
      <div style="padding-right: 30px;">
        <el-tabs v-model="activeName" >
          <el-tab-pane label="隐患信息" name="first">
            <el-form :model="formData" ref="formData" name="basic" label-width="120px" autocomplete="off">
              <el-row :gutter="15">
                <el-col :span="9">
                  <el-form-item label="检查类型:" name="checkType">
                    <el-select v-model="formData.checkType" show-search placeholder="请选择" style="width: 100%">
                      <el-option v-for="item in checkTypeList" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="检查日期:" name="checkDate">
                    <el-date-picker v-model="formData.checkDate" type="date" style="width: 100%;" format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="隐患位置:" name="riskLoc">
                    <el-input v-model="formData.riskLoc" />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="危险和有害因素:" name="dangerType">
                    <el-select v-model="formData.dangerType" show-search placeholder="请选择" style="width: 100%">
                      <el-option v-for="item in dangerTypeList" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="9">
                  <el-form-item label="隐患类型:" name="riskType">
                    <!-- <el-select v-model="formData.riskType" show-search placeholder="请选择" style="width: 100%">
                      <el-option v-for="item in riskTypeList" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select> -->
                    <el-cascader :options="riskTypeList" v-model="formData.riskType" style="width: 100%"></el-cascader>

                  </el-form-item>
                </el-col>

                <el-col :span="9">
                  <el-form-item label="隐患等级:" name="dangerLevel">
                    <el-select v-model="formData.dangerLevel" show-search placeholder="请选择" style="width: 100%">
                      <el-option v-for="item in dangerLevelList" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="9">
                  <el-form-item label="整改期限:" name="expiryDateValue">
                    <el-select v-model="formData.expiryDateValue" show-search placeholder="请选择" style="width: 100%">
                      <el-option v-for="item in expiryDateList" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="18">
                  <el-form-item label="隐患描述:" name="riskDesc">
                    <el-input v-model="formData.riskDesc" type="textarea" :rows="3" />
                  </el-form-item>
                </el-col>

                <el-col :span="18">
                  <el-form-item label="整改建议:" name="improveAdv">
                    <el-input v-model="formData.improveAdv" type="textarea" :rows="3" />
                  </el-form-item>
                </el-col>
                <el-col :span="18">
                  <el-form-item label="备注:" name="remark">
                    <el-input v-model="formData.remark" type="textarea" :rows="3" />
                  </el-form-item>
                </el-col>
              </el-row>


              <el-row>
                <el-col :span="9">
                  <el-form-item label="上传图片:" name="credCode">
                    <el-upload list-type="picture-card" :on-change="handleUploadChange" :auto-upload="false"
                      action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :file-list="fileList" :show-file-list="true"
                      :on-remove="handleUploadRemove">
                      <i class="el-icon-plus"></i>
                    </el-upload>

                  </el-form-item>
                </el-col>

              </el-row>
              <div style="margin-top: 20px;" v-if="formData.editStatus.indexOf('1') >= 0">
                <el-button type="primary" @click="handleOk" >提交</el-button>
              </div>

            </el-form>


          </el-tab-pane>
          <el-tab-pane label="整改信息" name="second" v-if="formData.tabStatus.indexOf('2') >= 0 ">
            <el-form :model="formData" ref="formData" name="basic" label-width="120px" autocomplete="off">
              <el-row :gutter="15">
                <el-col :span="18">
                  <el-form-item label="整改方案:" name="solvePlan">
                    <el-input v-model="formData.solvePlan" placeholder="请输入整改方案" type="textarea" />
                  </el-form-item>
                </el-col>

                <el-col :span="9">
                  <el-form-item label="预计完成时间:" name="planSolveDate">
                    <el-date-picker v-model="formData.planSolveDate" type="date" style="width: 100%;"
                      format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>

                <el-col :span="9">
                  <el-form-item label="整改状态:" name="solveStatus">
                    <el-select v-model="formData.solveStatus" show-search placeholder="请选择" style="width: 100%">
                      <el-option v-for="item in solveStatusList" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="整改完成时间:" name="solveFinishTime">
                    <el-date-picker v-model="formData.solveFinishTime" type="date" style="width: 100%;"
                      format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                  <el-col :span="20">

                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="上传图片:" name="credCode">
                      <el-upload list-type="picture-card" :on-change="handleUploadChange1" :auto-upload="false"
                        action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :file-list="improveFileList" :show-file-list="true"
                        :on-remove="handleUploadRemove1">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                  <el-col :span="20">
                  </el-col>
                <el-col :span="9">
                  <el-form-item label="备注:" name="solveRemark">
                    <el-input v-model="formData.solveRemark" placeholder="请输入备注" type="textarea" />
                  </el-form-item>
                </el-col>
                </el-row>
              <div style="margin-top: 20px;" v-if="formData.editStatus.indexOf('2') >= 0">
                <el-button type="primary" @click="clickSaveImprove">提交审核</el-button>
              </div>

            </el-form>



          </el-tab-pane>
          <el-tab-pane label="确认信息" name="third" v-if="formData.tabStatus.indexOf('3') >= 0 ">
            <el-form :model="formData" ref="formData" name="basic" label-width="120px" autocomplete="off">
              <el-row :gutter="15">
                <el-col :span="9">
                  <el-form-item label="整改状态:" name="confirmSolveStatus">
                    <el-select v-model="formData.confirmSolveStatus" show-search placeholder="请选择" style="width: 100%">
                      <el-option v-for="item in confirmSolveStatusList" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>


                <el-col :span="9">
                  <el-form-item label="整改确认时间:" name="confirmSolveFinishTime">
                    <el-date-picker v-model="formData.confirmSolveFinishTime" type="date" style="width: 100%;"
                      format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>

                <el-row>
                  <el-col :span="9">
                    <el-form-item label="上传图片:" name="credCode">
                      <el-upload list-type="picture-card" :on-change="handleUploadChange1" :auto-upload="false"
                        action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :file-list="confirmFileList" :show-file-list="true"
                        :on-remove="handleUploadRemove1">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>


                <el-col :span="9">
                  <el-form-item label="备注:" name="confirmSolveRemark">
                    <el-input v-model="formData.confirmSolveRemark" placeholder="请输入备注" type="textarea" />
                  </el-form-item>
                </el-col>
                </el-row>
              <div style="margin-top: 20px;" v-if="formData.editStatus.indexOf('3') >= 0">
                <el-button type="primary" @click="clickSaveConfirm">审核确认</el-button>
              </div>

            </el-form>


          </el-tab-pane>
        </el-tabs>



      </div>
      <el-image-viewer v-if="dialogVisible" class="image onsite-img" :url-list="[dialogImageUrl]" :on-close="closeViewer" />
    </div>
  </div>
</template>

<script>
  import {
    queryCompanyInfo,
    updateCompany,
    resetPassword,
  } from '@/service/company';
  import { updateUserNameAndPassword } from '@/service/user';
  import CompanySelect from '@/components/CompanySelect';
  import { uploadFile,updateImproveFile,querySafeRiskList } from '@/service/safeRisk';


  import { riskTypeList, expiryDateList, dangerLevelList } from './data'
  import { getCurrUser } from '@/common/constants';
  import { downloadFile } from '@/common/download';

  export default {
    components: { CompanySelect,
      'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
 },
    props: {},
    data() {
      return {
        user: {},
        activeName: 'first',
        formRef: null,
        formData: {},
        visible: false,
        companyName: '',
        isCurrent: false,
        isSaving: false,
        dialogVisible:false,
        dialogImageUrl:[],
        solveStatusList: [{
          label: "未整改",
          value: "未整改",
        }, {
          label: "整改中",
          value: "整改中",
        }, {
          label: "已完成",
          value: "已完成",
        },],
        confirmSolveStatusList: [{
      label: "整改不合格",
      value: "整改不合格",
    }, {
      label: "已完成",
      value: "已完成",
    }],
        checkTypeList: [
          {
            label: "领导检查",
            value: "领导检查",
          },
          {
            label: "日常检查",
            value: "日常检查",
          },
          {
            label: "季节性检查",
            value: "季节性检查",
          },
          {
            label: "节前检查",
            value: "节前检查",
          },
          {
            label: "安全联盟检查",
            value: "安全联盟检查",
          },
          {
            label: "专业性检查",
            value: "专业性检查",
          },
          {
            label: "其他",
            value: "其他",
          },
        ],
        dangerTypeList: [
          {
            label: "人的因素",
            value: "人的因素",
          },
          {
            label: "物的因素",
            value: "物的因素",
          },
          {
            label: "环境因素",
            value: "环境因素",
          }, {
            label: "管理因素",
            value: "管理因素",
          },

        ],
        riskTypeList,
        expiryDateList,
        dangerLevelList,
        fileList: [],
        files: [],
        confirmFileList: [],
        files1: [],
        improveFileList: [],
        files2: []
         

      };
    },
    mounted() {
      this.riskId = this.$route.params.riskId;
      this.user = getCurrUser();
      this.loadData(this.riskId)
    },
    methods: {
      closeViewer(){
        this.dialogVisible = false
      },
      handleUploadChange(file, fileList) {
        // this.fileList = fileList.slice(-3);
        this.fileList = fileList;
        this.files.push(file)

        console.log('this.files', this.files);
      },
      handleUploadChange1(file, fileList) {
        // this.fileList = fileList.slice(-3);
        this.confirmFileList = fileList;
        this.files1.push(file)
      },

      handleUploadChange2(file, fileList) {
        // this.fileList = fileList.slice(-3);
        this.improveFileList = fileList;
        this.files2.push(file)
      },

      async loadCompanyInfo() {
        const res = await queryCompanyInfo({ companyName: this.companyName });
        if (res.data) {
          this.formData = res.data;
          // Object.assign(, );
        }
      },

      handlePreview(file) {
        //这里是因为后台返回来的url，跟新上传的url不一样
        console.log('111');
        let url = file.url ||  file.response.imgUrl;
        this.dialogImageUrl = url;
        this.dialogVisible = true;
      },

      handleCancel() {
        this.$router.back();
      },


      handleUploadRemove(file, fileList) {
        this.files = this.files.filter(item => item != file)
      },
      handleUploadRemove1(file, fileList) {
        this.files1 = this.files.filter(item => item != file)
      },
      handleUploadRemove2(file, fileList) {
        this.files2 = this.files.filter(item => item != file)
      },

      handleOk() {

        this.isSaving = true;
        this.saveData();
        this.isSaving = false;
      },

      async saveData() {

        const fd = new FormData();
        // formData.append('file', fileObj.file);
        fd.append('body', JSON.stringify({ ...this.formData, compName: this.user.userId, riskType: this.formData.riskType[0] + '/' + this.formData.riskType[1] }));
        for (var i = 0; i < this.files.length; i++) {
          fd.append('file', this.files[i].raw);
        }
        let res = null;
        // const startDate = dayjs(formData.startDate_new).format('YYYY-MM-DD')
        res = await uploadFile(fd);
        if (res.success) {
          this.formData = {}
          this.$message.success('保存成功！');
        } else {
          this.$message.error(res.rtn_message);
        }
      },

      async clickSaveImprove(){
        const fd = new FormData();
        // formData.append('file', fileObj.file);
        fd.append('body', JSON.stringify({ ...this.formData, compName: this.user.userId}));
        for (var i = 0; i < this.files.length; i++) {
          fd.append('file', this.files[i].raw);
        }
        let res = null;
        // const startDate = dayjs(formData.startDate_new).format('YYYY-MM-DD')
        res = await updateImproveFile(fd);
        if (res.success) {
          this.$message.success('保存成功！');
          // this.$router.go(-1)
        } else {
          this.$message.error(res.rtn_message);
        }

      },

      async clickSaveConfirm(){
        const fd = new FormData();
        // formData.append('file', fileObj.file);
        fd.append('body', JSON.stringify({ ...this.formData, compName: this.user.userId}));
        for (var i = 0; i < this.files.length; i++) {
          fd.append('file', this.files[i].raw);
        }
        let res = null;
        // const startDate = dayjs(formData.startDate_new).format('YYYY-MM-DD')
        res = await updateConfirmFile(fd);
        if (res.success) {
          this.$message.success('保存成功！');
          this.$router.go(-1)
        } else {
          this.$message.error(res.rtn_message);
        }

      },

      async loadData(riskId){
        const fd = new FormData()
        let res = null;
        // const startDate = dayjs(formData.startDate_new).format('YYYY-MM-DD')
        res = await querySafeRiskList({riskId});
        if (res.dataList[0]) {
          this.formData = res.dataList[0]
          this.fileList = this.formData['fileUrls'].map(item=>{
            return {
              name: item, url:item
            }
          })
          this.improveFileList = this.formData['improveFileUrls'].map(item=>{
            return {
              name: item, url:item
            }
          })
          this.confirmFileList = this.formData['confirmSolveFileUrls'].map(item=>{
            return {
              name: item, url:item
            }
          })
        } else {
          this.$message.error(res.rtn_message);
        }

      },


      

    },
  };
</script>
<style scoped>
  >>>.el-form-item__content {
    text-align: start;
  }
</style>